<template>
  <div class="Htop  ">
    <div class="flex JustifyContentSA">
      <div class="flex cursor">
        <div class="title_box1 Bold colorF flexC JustifyContentC " @click="clone.shouli = true">
          <div style="padding-left:7.375rem ;">
            <p>
              <span class="font_s36">{{ text.shouli[0] }}</span>
              <!-- <span class="font_s14" style="color:rgba(255,255,255,0.6);">家</span> -->
            </p>
            <p class="font_s18" style="color:rgba(255,255,255,0.6);">{{ text.shouli[1] }}</p>
          </div>
        </div>
        <div class="title_box2 Bold colorF flexC JustifyContentC " @click="clone.pinggu = true">
          <div style="padding-left:7.375rem ;">
            <p>
              <span class="font_s36">{{ text.pinggu[0] }}</span>
              <!-- <span class="font_s14" style="color:rgba(255,255,255,0.6);">家</span> -->
            </p>
            <p class="font_s18" style="color:rgba(255,255,255,0.6);">{{ text.pinggu[1] }}</p>
          </div>
        </div>
      </div>
      <p class="title colorF font_s27 textC"><!-- 浦东社会组织协同监管平台 --></p>
      <div class="flex">
        <div class="title_box3 Bold colorF flexC JustifyContentC " @click="clone.liveServe = true">
          <div style="padding-left:6.375rem ;">
            <p>
              <span class="font_s36">{{ text.fuwu[0] }}</span>
              <!-- <span class="font_s14" style="color:rgba(255,255,255,0.6);">家</span> -->
            </p>
            <p class="font_s18" style="color:rgba(255,255,255,0.6);">{{ text.fuwu[1] }}</p>
          </div>
        </div>
        <div class="title_box4 Bold colorF flexC JustifyContentC " @click="clone.laoren = true">
          <div style="padding-left:5.375rem ; ">
            <p>
              <span class="font_s36">{{ creditForm.jrfwlrs }}</span>
              <!-- <span class="font_s14" style="color:rgba(255,255,255,0.6);">家</span> -->
            </p>
            <p class="font_s16" style="color:rgba(255,255,255,0.6); ">{{ text.laoren[1] }}</p>
          </div>
        </div>
      </div>
    </div>
    <YiBaoPolygon02 v-if="clone.shouli" @hidden="hiddenClone(0)" title="受理机构点"><Shouli></Shouli></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.pinggu" @hidden="hiddenClone(1)" title="评估机构"><Pinggu></Pinggu></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.liveServe" @hidden="hiddenClone(2)" title="服务机构数"><LiveServeOrganization></LiveServeOrganization></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.laoren" @hidden="hiddenClone(3)" title="今日居家服务老人数"><Laoren></Laoren></YiBaoPolygon02>
  </div>
</template>

<script>
import YiBaoPolygon02 from '@/components/YiBaoPolygon02'
import Shouli from './topComponents/Shouli'
import Pinggu from './topComponents/Pinggu'

import Laoren from './topComponents/Laoren'

// 住养服务机构、居家服务机构
import LiveServeOrganization from './topComponents/LiveServeOrganization'

export default {
  name: 'top',
  components: {
    YiBaoPolygon02,
    Shouli,
    Pinggu,
    Laoren,

    LiveServeOrganization
  },
  data () {
    return {
        creditForm: {
            jrfwlrs: 0
        },
      clone: {
        shouli: false,
        pinggu: false,
        liveServe: false,
        laoren: false
      },
      text: {
        shouli: ['69', '受理机构点'],
        pinggu: ['1+47', '评估机构'],
        fuwu: ['208', '服务机构数'],
        laoren: ['16734', '今日居家服务老人数']
      }
    }
  },
  methods: {
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.shouli = false
      } else if (index === 1) {
        this.clone.pinggu = false
      } else if (index === 2) {
        this.clone.liveServe = false
      } else if (index === 3) {
        this.clone.laoren = false
      }
    }
  },
    mounted () {
        setInterval(() => {
            this.creditForm.jrfwlrs = 0

            var creditIntervalJrfwlrs = null

            creditIntervalJrfwlrs = setInterval(() => {
                if (this.creditForm.jrfwlrs >= this.text.laoren[0]) {
                    this.creditForm.jrfwlrs = this.text.laoren[0]
                    clearInterval(creditIntervalJrfwlrs)
                } else {
                    if (parseInt(this.creditForm.jrfwlrs + Math.ceil(this.text.laoren[0] / 10)) >= this.text.laoren[0]) {
                        this.creditForm.jrfwlrs = this.text.laoren[0]
                    } else {
                        this.creditForm.jrfwlrs = parseInt(this.creditForm.jrfwlrs + Math.ceil(this.text.laoren[0] / 10))
                    }
                }
            }, 60)
        }, 4000)
    }
}
</script>

<style lang="scss" scoped>
.Htop {
   padding-top: 1rem;
   padding-left: 1rem;
  .title {
    padding: 4rem 25.5rem;
    background: url(../..//assets/img/home/001.png) no-repeat center;
    background-size: 100% 100%;
  }
  .title_box1,
  .title_box2,
  .title_box3,
  .title_box4 {
    width: 16.625rem;
    height: 5.9375rem;
  }
  .title_box1 {
    background: url(../..//assets/img/home/002.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box2 {
    background: url(../..//assets/img/home/003.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box3 {
    background: url(../..//assets/img/home/004.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box4 {
    background: url(../../assets/img/home/005.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
